<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>
</head>
<link rel="stylesheet" href="../styles/common.css">
<link rel="stylesheet" href="../styles/equipApply.css">
<link rel="stylesheet" href="../libs/cityChoose.css">
<body>
    <div id="root">
        <header>
            <div class="date">
                <div class="currentTime"></div>
                <div class="cDate">
                    <div class="currentDate"></div>
                    <div class="currentWeek"></div>
                </div>
            </div>
            <div class="site">
                <span class="iconfont">&#xe70c;</span>
                <span class="city">全国</span>
                <div id="cityChooseBox"></div>
            </div>
        </header>
        <div class="main">
            <div class="left">
                <!-- 科学使用时长 -->
                <div class="serviceTime">
                    <p class="module">
                        <img src="../imgs/line.png" alt="">
                        <span class="title">学科使用时长</span>
                    </p>
                    <div id="serviceTimeChart"></div>
                </div>
                <!-- 年级占比 -->
                <div class="gradeRate">
                    <p class="module">
                        <img src="../imgs/line.png" alt="">
                        <span class="title">年级使用时长占比</span>
                    </p>
                    <div id="gradeRateChart"></div>
                </div>
                <!-- 排行榜 -->
                <div class="faultCondition">
                    <p class="module">
                        <img src="../imgs/line.png" alt="">
                        <span class="title">地点排行榜</span>
                    </p>
                    <table class="faultConditionTable">
                        <tr>
                            <th>序号</th>
                            <th class="company">地点名称</th>
                            <th>使用时长</th>
                            <th>使用率</th>
                        </tr>
                        <tr>
                            <td>01</td>
                            <td>阔地小学</td>
                            <td>38520</td>
                            <td>90%</td>
                        </tr>
                        <tr>
                            <td>02</td>
                            <td>园区实验小学</td>
                            <td>38520</td>
                            <td>90%</td>
                        </tr>
                        <tr>
                            <td>03</td>
                            <td>都江堰十元国际双语</td>
                            <td>38520</td>
                            <td>90%</td>
                        </tr>
                        <tr>
                            <td>04</td>
                            <td>阔地小学</td>
                            <td>38520</td>
                            <td>90%</td>
                        </tr>
                        <tr>
                            <td>05</td>
                            <td>阔地小学</td>
                            <td>38520</td>
                            <td>90%</td>
                        </tr>
                        <tr>
                            <td>06</td>
                            <td>阔地小学</td>
                            <td>38520</td>
                            <td>90%</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="middle">
                <!-- 省市地图 -->
                <div class="map">
                    <p class="module">
                        <img src="../imgs/line.png" alt="">
                        <span class="title">各行政区使用分布情况</span>
                    </p>
                    <div class="statistics">
                        <div>
                            <p class="count">2214</p>
                            <p class="type">装备数</p>
                        </div>
                        <div>
                            <p class="count">349</p>
                            <p class="type">当前在线</p>
                        </div>
                        <div>
                            <p class="count">75</p>
                            <p class="type">在线率</p>
                        </div>
                        <div>
                            <p class="count">75</p>
                            <p class="type">使用时长 (时)</p>
                        </div>
                        <div>
                            <p class="count">75</p>
                            <p class="type">使用率</p>
                        </div>
                        <div>
                            <p class="count">75</p>
                            <p class="type">今日警告装备占比</p>
                        </div>
                    </div>
                    <div class="maps">
                        <div id="mapLeftChart"></div>
                        <div id="mapRightChart"></div>
                    </div>
                </div>
                <!-- 近30天装备使用情况 -->
                <div class="useSituation">
                    <p class="module">
                        <img src="../imgs/line.png" alt="">
                        <span class="title">近30天装备使用情况</span>
                    </p>
                    <div id="useSituationChart"></div>
                </div>
            </div>
            <div class="right">
                <!-- 使用情况 -->
                <div class="useQing">
                    <p class="module">
                        <img src="../imgs/line.png" alt="">
                        <span class="title">使用情况</span>
                    </p>
                    <div id="useQingChart"></div>
                </div>
                <!-- 近一小时班班通各时段使用情况 -->
                <div class="hourUse">
                    <p class="module">
                        <img src="../imgs/line.png" alt="">
                        <span class="title">近一小时装备使用情况</span>
                    </p>
                    <div id="hourUseChart"></div>
                </div>
                <!-- 告警程度以及类别分布 -->
                <div class="warn">
                    <p class="module">
                        <img src="../imgs/line.png" alt="">
                        <span class="title">告警程度以及类别分布</span>
                    </p>
                    <div id="warnChart"></div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../libs/jquery-2.1.0.js"></script>
<script src="../libs/echarts.min.js"></script>
<script src="../libs/areaMap.js"></script>
<script src="../libs/utils.js"></script>

<script src="../echartsConf/apply.js"></script>
<script src="../libs/cityChoose.js"></script>
<script src="../js/equipApply.js"></script>
</html>